<template>
    <el-card>
        <div class="btn-panel">
            <el-dropdown split-button type="primary" @command="openDialog">
                添加
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="ResourceKind.Menu">菜单</el-dropdown-item>
                        <el-dropdown-item :command="ResourceKind.Page">页面</el-dropdown-item>
                        <el-dropdown-item :command="ResourceKind.Action">操作</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-table :data="treeData" row-key="id">
            <el-table-column prop="name" label="资源名称"></el-table-column>
            <el-table-column prop="code" label="资源代码" align="center"></el-table-column>
            <el-table-column prop="kindName" label="资源类型" align="center"></el-table-column>
            <el-table-column prop="route" label="路由" align="center"></el-table-column>
            <el-table-column prop="path" label="视图文件" align="center"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" link @click="edit(scope.row)">修改</el-button>
                    <el-button type="primary" link @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <MenuDialog ref="menuDialogRef" @close="query" />
    <ActionDialog ref="actionDialogRef" @close="query" />
</template>

<script lang="ts" setup>
import * as resource from '@/api/resource'
import  { type TreeNode, ResourceKind } from '@/api/resource/types'
import MenuDialog from './components/menu-dialog.vue'
import ActionDialog from './components/action-dialog.vue'

const menuDialogRef = ref()
const actionDialogRef = ref()

const treeData = ref<TreeNode[]>()
provide('resource-tree', treeData)

const query = async () => {
    treeData.value = await resource.tree()
}

const openDialog = (kind: ResourceKind) => {
    switch(kind) {
        case ResourceKind.Menu:
            menuDialogRef.value.open({
                title: '添加菜单'
            })
            break;
        case ResourceKind.Page:
            break;
        case ResourceKind.Action:
            actionDialogRef.value.open({
                title: '添加操作'
            })
            break;
    }
    
}

const edit = (row: TreeNode) => {
    switch(row.kind) {
        case ResourceKind.Menu:
            menuDialogRef.value.open({
                title: '编辑菜单',
                id: row.id
            })
            break;
        case ResourceKind.Action:
            actionDialogRef.value.open({
                title: '编辑操作',
                id: row.id
            })
            break;
    }
}

const remove = (row: TreeNode) => {
    ElMessageBox.confirm(`确认删除 ${row.name}?`, '删除')
        .then(() => {
            resource.remove(row.id)
                .then((result: ApiResult) => {
                    ElMessage.success(result.message)
                    query()
                })
        })
}

onMounted(async () => {
    query()
})
</script>

<style lang="scss" scoped>
.btn-panel {
    display: flex;
    margin-bottom: 20px;
}
</style>
